<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件委派</title>

</head>
<body>
<input type="text" placeholder="请输入你的爱好">
<ul class="list">

</ul>
<script>
  //事件委派使用场景:新添加的东西需要和旧的有一样的功能
  //通过给爹添加事件,不给元素本身添加
  var inputNode = document.querySelector("input");
  var ulNode = document.querySelector(".list");
  
  ulNode.onmouseover = function (event) {
    //在这里找发生事件的元素本身
    var liNode = event.target || event.srcElement;
    liNode.style.backgroundColor = 'green';
  }

  ulNode.onmouseout = function (event) {
    //在这里找发生事件的元素本身
    var liNode = event.target;
    liNode.style.backgroundColor = 'pink';
  }
  
  
  inputNode.onkeyup = function (event){
    if(event.key == 'Enter'){
      //
      var value = inputNode.value;
      if(value.trim()){
        var liNode = document.createElement('li');
        liNode.innerText = value;
        ulNode.appendChild(liNode);
        //创建完成新的li直接添加移入移除变色
        liNode.onmouseenter = function (){
        
        }
        
        
        
      }else{
        alert("请输入合法的兴趣爱好")
      }
      inputNode.value = '';
      
    }
  }

</script>
</body>
</html>